<template>
  <div>
    <el-card style="margin-bottom: 10px; width: 80vw">
      <div>
        <el-input placeholder="请输入名称" style="width: 300px; margin-right: 50px" v-model="expertGroup.name"></el-input>
        <el-button type="primary" @click="addExpertGroup">创建评估组</el-button>
      </div>
    </el-card>

    <el-card v-for="item in tableData" style="margin-bottom: 10px; width: 80vw">
      <span>{{ item.name }}</span> <br>
      <span>组长：{{ item.expertName }}</span>
      <el-table :data="item.experts" stripe :header-cell-style="{backgroundColor: 'aliceblue', color: '#666'}"
                style="margin-top: 10px">
        <el-table-column prop="expertId" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="name" label="用户名" align="center"></el-table-column>

        <el-table-column label="操作" align="center" width="180">
          <template v-slot="scope">
            <el-button size="mini" type="primary" plain @click="setMaster(scope.row, item)">设置为组长</el-button>
            <el-button size="mini" type="danger" plain @click="handleEdit(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      {{ item.expert }}
    </el-card>

    <!--    <div></div>-->
  </div>
</template>

<script>
import Request from "@/urils/request";
import request from "@/urils/request";

export default {
  name: "ExpertsGroup",
  data() {
    return {
      tableData: [],
      groupSubmit: {
        expertId: '',
        expertName: '',
        id: '',
        name: ''
      },
      expertGroup: {
        name: ''
      }
    }
  },
  methods: {
    load() {
      Request.get('/experts/selectGroup').then(res => {
        if (res.code === '200') {
          this.tableData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleEdit(row) {
      this.$confirm('是否从小组中删除该专家', '确认删除', {type: "warning"}).then(response => {
        request.post('/experts/delExpert', row).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('删除成功')
            // location.reload()
            this.load()
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    setMaster(row, group) {
      this.groupSubmit.expertId = row.expertId
      this.groupSubmit.expertName = row.name
      this.groupSubmit.id = group.id
      this.groupSubmit.name = group.name
      request.post('/experts/setMaster', this.groupSubmit).then(res => {
        if (res.code === '200') {
          this.load()
          this.$message.success("设置成功")
        }else{
          this.$message("设置失败，" + res.msg)
        }
      })
    },
    addExpertGroup(){
      if(this.expertGroup.name === ''){
        this.$message.error("请输入评估组名称")
        return false
      }
      request.post("/experts/addGroup", this.expertGroup).then(res => {
        if(res.code === '200'){
          this.$message.success("创建成功")
          this.load()
          this.expertGroup.name = ''
        }else{
          this.$message.error(res.msg)
        }
      })
    }
  },
  created() {
    this.load()
  }
}
</script>

<style scoped>
.dataCards {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>